/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-04-16 13:54:40
 * @LastEditTime : 2023-05-17 13:32:07
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Admin\Assembly\BodyList.jsx
 * @Description  :
 */
import { MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined } from '@ant-design/icons'
import { useSessionStorageState } from 'ahooks'
import { Tabs, Tooltip, Popconfirm, message } from 'antd'
import { useEffect } from 'react'
import { useState, lazy } from 'react'
import { breadthSearch } from '../../../Common/Configure/Common'

const Home = lazy(() => import('../PageType/Home'))
const ListPages = lazy(() => import('../PageType/ListPages'))
const ChartPages = lazy(() => import('../PageType/ChartPages'))
const DiyPages = lazy(() => import('../PageType/DiyPages'))

const PageType = ({ tableName, pageType, targetUrl }, SelectMenus) => {
    switch (pageType) {
        case '9144691c-a87d-40e5-9a33-946fb0bcfc6c':
            return {
                label: tableName,
                key: SelectMenus,
                url: targetUrl,
                children: <ListPages url={targetUrl} title={tableName} uuid={SelectMenus} />,
            }
        case '4a7790bf-55b7-495d-95cb-8ce9de7cf83e':
            return {
                label: tableName,
                key: SelectMenus,
                url: targetUrl,
                children: <ChartPages url={targetUrl} title={tableName} uuid={SelectMenus} />,
            }
        case '7a06b22f-5c9e-43a3-9075-6b64c47379dc':
            return {
                label: tableName,
                key: SelectMenus,
                url: targetUrl,
                children: <DiyPages url={targetUrl} uuid={SelectMenus} />,
            }
        default:
            return <div>未知组件</div>
    }
}

export const Body001 = ({ OpenMenuStatus, OpenMenuEvent, SelectMenusEvent, SelectMenus }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const [MENU] = useSessionStorageState('MENU')
    const [, setOpenUuid] = useSessionStorageState('OpenUuid')

    const [activeKey, setActiveKey] = useState()
    const [TabsList, setTabsList] = useState([
        {
            label: `首页`,
            key: 'a0b4f6b8-ef44-4b43-925f-85a299eb52cb',
            url: 'Home',
            children: <Home />,
            closable: false,
        },
    ])

    const tableNav = {
        left: (
            <div className="tableNavBtn" onClick={() => OpenMenuEvent.emit()}>
                {OpenMenuStatus ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
            </div>
        ),
        right: (
            <>
                {TabsList && TabsList.length > 1 && (
                    <Tooltip title="全部关闭">
                        <Popconfirm
                            title="是否要关闭所有打开的页面?"
                            placement="bottomRight"
                            onConfirm={() => {
                                SelectMenusEvent.emit(TabsList[0].key)
                                setActiveKey(TabsList[0].key)
                                setTabsList([TabsList[0]])
                                messageApi.info('菜单已全部关闭')
                            }}
                            okText="关闭"
                            cancelText="取消"
                        >
                            <CloseOutlined className="tableNavBtn Right" />
                        </Popconfirm>
                    </Tooltip>
                )}
            </>
        ),
    }

    useEffect(() => {
        if (TabsList.findIndex(v => v.key === SelectMenus) === -1) {
            setTabsList(e => [...e, PageType(breadthSearch(MENU, 'uuid', SelectMenus), SelectMenus)])
        }
        setActiveKey(SelectMenus)
        setOpenUuid(SelectMenus)
    }, [MENU, SelectMenus, TabsList, setOpenUuid])

    const remove = targetKey => {
        let newActiveKey = activeKey
        let lastIndex = -1
        TabsList.forEach((item, index) => {
            if (item.key === targetKey) lastIndex = index - 1
        })
        const newPanes = TabsList.filter(item => item.key !== targetKey)
        if (newPanes.length && newActiveKey === targetKey) {
            if (lastIndex >= 0) newActiveKey = newPanes[lastIndex].key
            else newActiveKey = newPanes[0].key
        }
        SelectMenusEvent.emit(newActiveKey)
        setTabsList([...newPanes])
        setActiveKey(newActiveKey)
        setOpenUuid(newActiveKey)
    }

    return (
        <div className="Body001">
            {contextHolder}
            <div className="Body shadowBox-001">
                <Tabs
                    className="BoxTabs"
                    type="editable-card"
                    tabBarExtraContent={tableNav}
                    hideAdd
                    activeKey={activeKey}
                    onChange={e => {
                        setOpenUuid(e)
                        setActiveKey(e)
                    }}
                    onEdit={e => remove(e)}
                    items={TabsList}
                />
            </div>
        </div>
    )
}
